<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乖乖，圣诞节快乐！</title>
    <style>
        body {
            width: 100%;
            height: 90%;
            background-color: #6a1010;
        }

        .card {
            width: 300px;
            height: 500px;
            /* background-color: #521c1c; */
            margin: 40% auto;
            position: relative;
        }

        .tree {
            opacity: 1;
        }

        .cover {
            transition: all 0.3s;
            /* z-index: 2; */
        }

        .card:hover .cover {
            transform: perspective(900px) translateY(-5%) rotateX(50deg) translateZ(0);
        }

        .txt {
            transition: all 0.3s;
            position: absolute;
            width: 100%;
            top: 400px;
            left: 50%;
            transform: translateX(-50%);
        }

        .card:hover .txt {
            top: 350px;
        }

        .tree {
            opacity: 0;
            transition: all 0.3s;
            position: absolute;
            top: -100px;
            left: -20px;
            width: 330px;
        }

        .card:hover .tree {
            top: -140px;
            opacity: 1;
        }

        .snow-container {
            overflow: hidden;
            width: 100%;
            background-color: red;
            max-width: 100%;
            height: 100%;
            pointer-events: none;
            /*阻止任何事件*/
        }

        .snow {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /*垂直、水平居中*/
            margin: auto;
            transform: translate(0, -100%);
            animation: snowing infinite linear;
            pointer-events: none;
        }

        .foreground {
            animation-duration: 25s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png');
        }

        .foreground.layer {
            animation-delay: 12.5s;
            /*推迟时间是总时间/2*/

        }

        .medium {
            animation-duration: 35s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
        }

        .medium.layer {
            animation-delay: 17.5s;
        }

        .background {
            animation-duration: 45s;
            background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');

        }

        .background.layer {
            animation-delay: 22.5s;
        }

        @keyframes snowing {
            100% {
                transform: translate(15%, 100%);
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="warp">
            <img src="./img//1703426562181.png" class="cover" alt="">
        </div>
        <div class="warp2">
            <div class="txt" style="text-align: center;">
                <div class="text" style="font-size: 29px;font-weight: 800;color: #d0ce5b;">🎄乖乖,圣诞节快乐</div>
                <div class="text2" style="font-style: oblique;margin-top: 10px;color: #ca4747;font-weight: 800;">🎄dodo
                    ,
                    Merry Chrismas
                </div>
            </div>
            <img src="./img/微信图片_20231225100625.png" alt="" class="tree" style="">
        </div>
    </div>
    <div class="snow-container">
        <div class="snow foreground"></div>
        <div class="snow foreground layer"></div> <!--延迟衔接-->
        <div class="snow medium"></div>
        <div class="snow medium layer"></div>
        <div class="snow background"></div>
        <div class="snow background layer"></div>
    </div>
</body>

</html>